<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/js/jquery-1.10.2.js}"></script>
    <script th:src="@{/layui/layui.all.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="mytoolbar">
    <button type="button" class="layui-btn layui-btn-radius" lay-event="saveRole"><i class="layui-icon layui-icon-addition"></i>添加</button>
    <button type="button" class="layui-btn layui-btn-radius layui-btn-danger" lay-event="delRole"><i class="layui-icon layui-icon-delete"></i>删除</button>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn  layui-btn-normal layui-btn-xs" lay-event="edit">修改</a>
</script>
<form class="layui-form" action="" id="roleSaveForm" style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">角色名</label>
        <div class="layui-input-block">
            <input type="text" name="roleName" required  lay-verify="required" placeholder="请输入角色名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限字符</label>
        <div class="layui-input-block">
            <input type="text" name="roleKey" required  lay-verify="required" placeholder="请输入权限字符" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">显示顺序</label>
        <div class="layui-input-block">
            <input type="text" name="roleSort" required  lay-verify="required" placeholder="请输入显示顺序" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <input type="text" name="remark" required  lay-verify="required" placeholder="请输入备注信息" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button"  	class="layui-btn layui-btn-normal" lay-submit lay-filter="saveRoleForm">保存</button>
            <button type="reset"  	class="layui-btn layui-btn-warm">重置</button>
        </div>
    </div>
    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">获取选中节点数据</button>
        <button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">勾选指定节点</button>
        <button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">重载实例</button>
    </div>
</form>
<form class="layui-form" action="" id="roleEditForm" style="display: none">
    <input type="hidden" id="roleId" name="roleId">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名</label>
            <div class="layui-input-block">
                <input type="text" id="roleName" name="roleName" required  lay-verify="required" placeholder="请输入角色名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限字符</label>
            <div class="layui-input-block">
                <input type="text" id="roleKey" name="roleKey" required  lay-verify="required" placeholder="请输入权限字符" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">显示顺序</label>
            <div class="layui-input-block">
                <input type="text" id="roleSort" name="roleSort" required  lay-verify="required" placeholder="请输入显示顺序" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" id="remark" name="remark" required  lay-verify="required" placeholder="请输入备注信息" autocomplete="off" class="layui-input">
            </div>
        </div>
    <div id="test12" class="demo-tree-more"></div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button"  	class="layui-btn layui-btn-normal" lay-submit lay-filter="editRoleForm" lay-demo="getChecked">修改</button>
                <button type="reset"  	class="layui-btn layui-btn-warm">重置</button>
            </div>
        </div>




</form>
</body>
<script>
    var form=layui.form;
    var table=layui.table;
    form.render();//渲染表单
    //第一个实例
    var myTable= table.render({
        elem: '#demo'
        ,height: 350
        ,url: 'showRole' //数据接口
        ,toolbar: '#mytoolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
        ,cols: [
            [ //表头
                {field: 'roleId', title: '角色编号', width:80, sort: true, fixed: 'left',checkbox: true}
                ,{field: 'roleName', title: '角色名称', width:120, sort: true, fixed: 'left'}
                ,{field: 'roleKey', title: '权限字符', width:120}
                ,{field: 'roleSort', title: '显示顺序',sort: true, width:120}
                ,{field: 'status', title: '状态',
                templet: '<p><button type="button" id="zt" class="layui-btn layui-btn-sm layui-btn-normal">{{d.status==0?"正常":"异常"}}</button></p>',width:80}
                ,{field: 'remark', title: '备注信息', width:200}
                ,{field: 'createTime', title: '创建时间', sort: true, width:180}
                ,{field: 'createBy', title: '创建人', width:110}
                ,{field: 'updateTime', title: '修改时间', sort: true, width:180}
                ,{field: 'updateBy', title: '修改人', width:110}
                ,{ title: '操作', width:100, toolbar: '#barDemo'}
            ]]
    });
    //监听头工具栏事件
    table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id)
            ,data = checkStatus.data; //获取选中的数据
        var ids=[];
        switch(obj.event){
            case 'saveRole':
                layer.open(
                    {
                        type: 1,
                        content: $("#roleSaveForm"),
                        icon: 1,
                        title:"添加角色",
                        area: ['450px', '300px']
                    }
                )
                break;
            case 'update':
                if(data.length === 0){
                    layer.msg('请选择一行');
                } else if(data.length > 1){
                    layer.msg('只能同时编辑一个');
                } else {
                    layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                }
                break;
            case 'delRole':
                if(data.length === 0){
                    layer.msg('请选择一行');
                } else {
                    console.log(data)
                    layer.confirm('确定要删除吗?', function(index){
                        //获取所有需要删除的userid，保存在ids的数组中
                        for(var i=0;i<data.length;i++){
                            ids.push(data[i].roleId);
                        }
                        $.ajax({
                            url: 'delRole',//地址
                            dataType: 'json',//数据类型
                            type: 'POST',//类型
                            data:{ids:JSON.stringify(ids)},//将数组ids转换成json字符串
                            //请求成功
                            success: function (result) {
                                if(result.code==0){
                                    //关闭弹出层
                                    layer.close(index);
                                    //显示删除成功消息
                                    layer.msg(result.message,{icon:1})
                                    //重新加载数据表格
                                    myTable.reload();
                                }else
                                {
                                    //关闭弹出层
                                    layer.close(index);
                                    layer.msg(result.message,{icon:5})
                                }
                            }
                        });

                    });
                }
                break;
        };
    });
    //监听提交
    form.on('submit(saveRoleForm)', function(data){
        //数据的提交，ajax方式
        console.log(data.field)
        $.ajax({
            url: 'saveRole',//地址
            dataType: 'json',//数据类型
            type: 'POST',//类型
            data:data.field,
            //请求成功
            success: function (result) {
                console.log(result);
                if(result.code==0){
                    //关闭弹出层
                    layer.closeAll();
                    //显示添加成功消息
                    layer.msg(result.message,{icon:1})
                    //重新加载数据表格
                    myTable.reload();
                }else
                {
                    //关闭弹出层
                    layer.closeAll();
                    layer.msg(result.message,{icon:5})
                }
            }
        });
        return false;
    });
    form.on('submit(editRoleForm)', function(data){
        //数据的提交，ajax方式
        console.log(data.field)
        $.ajax({
            url: 'editRole',//地址
            dataType: 'json',//数据类型
            type: 'POST',//类型
            data:data.field,
            //请求成功
            success: function (result) {
                if(result.code==0){
                    //关闭弹出层
                    layer.closeAll();
                    //显示添加成功消息
                    layer.msg(result.message,{icon:1})
                    //重新加载数据表格
                    myTable.reload();
                }else
                {
                    //关闭弹出层
                    layer.closeAll();
                    layer.msg(result.message,{icon:5})
                }
            }
        });
        return false;
    });
    //监听行工具事件
    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            ,layEvent = obj.event; //获得 lay-event 对应的值
        if(layEvent === 'detail'){
            layer.msg('查看操作');
        } else if(layEvent === 'del'){
            layer.confirm('真的删除行么', function(index){
                obj.del(); //删除对应行（tr）的DOM结构
                layer.close(index);
                //向服务端发送删除指令
            });
        } else if(layEvent === 'edit'){
            layer.msg('编辑操作');
            //填充修改用户的表单项
            console.log(data);
            $("#roleId").val(data.roleId);
            $("#roleName").val(data.roleName);
            $("#remark").val(data.remark);
            $("#roleKey").val(data.roleKey);
            $("#roleSort").val(data.roleSort);
            layer.open(
                {
                    type: 1,
                    content: $("#roleEditForm"),
                    icon: 1,
                    title:"修改用户",
                    area: ['450px', '300px']
                }
            )
        }
    });

    var dataa;
    layui.use(['tree', 'util'], function(){

        $.ajax({
            url:"/menu/tree",    //请求的url地址
            success:function(req){
                tree.render({
                    elem: '#test12'
                    ,data:req
                    ,showCheckbox: true  //是否显示复选框
                    ,id: 'demoId1'
                    ,isJump: true //是否允许点击节点时弹出新窗口跳转
                    ,click: function(obj){
                        var data = obj.data;  //获取当前点击的节点数据
                        layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
                    }
                });

            },
            error:function(){
                //请求出错
            },
            complete:function(){
                //请求完成
            }
        });
        var tree = layui.tree
            , layer = layui.layer
            , util = layui.util

            //模拟数据
            , data = dataa;


            //模拟数据2




        //按钮事件
        util.event('lay-demo', {
            getChecked: function(othis){
                var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据

                layer.alert(JSON.stringify(checkedData), {shade:0});
                console.log(checkedData);
            }
            ,setChecked: function(){
                tree.setChecked('demoId1', [12, 16]); //勾选指定节点
            }
            ,reload: function(){
                //重载实例
                tree.reload('demoId1', {

                });

            }
        });

        //按钮事件
        util.event('lay-demo', {
            getChecked: function(othis){
                var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据

                layer.alert(JSON.stringify(checkedData), {shade:0});
                console.log(checkedData);
            }
            ,setChecked: function(){
                tree.setChecked('demoId1', [12, 16]); //勾选指定节点
            }
            ,reload: function(){
                //重载实例
                tree.reload('demoId1', {

                });

            }
        });






        //开启节点操作图标
        tree.render({
            elem: '#test9'
            ,data: data
            ,edit: ['add', 'update', 'del'] //操作节点的图标
            ,click: function(obj){
                layer.msg(JSON.stringify(obj.data));
            }
        });
    });
</script>

</html>